<template>
  <component
    :container-class="`flex flex-col justify-between min-h-full${
      isMobile ? ' _mobile-center-wrapper' : ''
    }`"
    :data-source-mode="DataSourceMode.Pagination"
    :request="getSales"
    :default-page-size="4"
    :is="BasicTable<API.UC.SaleHistoryItem>"
  >
    <template #default="{ list, pageSize, loading }">
      <div class="_list" :class="{ _mobile: isMobile }">
        <template v-if="loading">
          <div class="_item _center" v-for="item in pageSize" :key="item">
            <loading class="!w-2.5rem" :track-width="6" />
          </div>
        </template>
        <template v-else>
          <div
            class="_item _box-item _container"
            v-for="(item, idx) in list"
            :key="idx"
          >
            <header class="_header">
              <span class="_title">{{ item.name }}</span>
              <span class="_time">{{ item.time }}</span>
            </header>
            <div class="_box-item-content _content">
              <div class="_image-container" v-if="!isMobile">
                <img :src="item?.image" />
              </div>
              <ul class="_box-item-info _description-list">
                <li>
                  <label>Product</label>
                  <span>{{ item?.name }}</span>
                </li>
                <li>
                  <label>Brand</label>
                  <span>{{ item?.brand }}</span>
                </li>
                <li>
                  <label>Amount USD</label>
                  <span>${{ item?.amount }}</span>
                </li>
              </ul>
            </div>
          </div>
        </template>
      </div>
    </template>
  </component>
</template>

<script lang="tsx" setup>
import { getSales } from "@/api/uc";
import { DataSourceMode } from "@/components/BasicTable/basicTable";
import BasicTable from "@/components/BasicTable/basicTable.vue";
import Loading from "@/components/Loading/loading.vue";
import { useMedia } from "@/hooks/useMedia";

const isMobile = useMedia();
</script>

<style lang="less" scoped>
@import url("../styles/common.less");

._box-item {
  ._box-item-content {
    @apply flex items-center;
    ._image-container {
      @apply flex items-center;
      height: 100%;
      img {
        width: 9.56rem;
        height: 9.56rem;
        object-fit: contain;
      }
    }

    ._box-item-info {
      @apply flex-1 w-0;
    }
  }
}
</style>
